<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #bigBox{
            width: 1840px;
            height: 920px;
            background-color: white;
            border:1px solid darkgray;
            display: flex;
        }
        #box1{
            width: 920px;
            height: 920px;
            background-color: white;
            border:1px solid darkgray;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
            align-items: center;
        }
        #box1 div{
            width: 300px;
            height: 300px;
            border: 1px solid darkgrey;
        }
        #box2{
            width: 920px;
            height: 920px;
            background-color: white;
            border:1px solid darkgray;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
            align-items: center;
        }
        #box2 img{
            width: 300px;
            height: 300px;
            text-align: center;
            line-height: 300px;
        }
    </style>
    <script>
        function drag(ev){
            console.log("Text",ev.target.id);
            ev.dataTransfer.setData("Text",ev.target.id);
        }
        function allowDrop(ev){
            console.log("拖到位了还没放下去");
            ev.preventDefault();
        }
        function drop(ev){
            console.log("放下去了");
            var data=ev.dataTransfer.getData("Text");
            ev.target.appendChild(document.getElementById(data));
        }
    </script>
</head>
<body>
    <div id="bigBox">
        <div id="box1">
            <div id="over1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
            <div id="over2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
            <div id="over3" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
            <div id="over4" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
            <div id="over5" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
            <div id="over6" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
            <div id="over7" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
            <div id="over8" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
            <div id="over9" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
        </div>
        <div id="box2">
            <img src="../images/拼图/1.jpg" id="move1" draggable="true" ondragstart="drag(event)"/>
            <img src="../images/拼图/2.jpg" id="move2" draggable="true" ondragstart="drag(event)"/>
            <img src="../images/拼图/3.jpg" id="move3" draggable="true" ondragstart="drag(event)"/>
            <img src="../images/拼图/4.jpg" id="move4" draggable="true" ondragstart="drag(event)"/>
            <img src="../images/拼图/5.jpg" id="move5" draggable="true" ondragstart="drag(event)"/>
            <img src="../images/拼图/6.jpg" id="move6" draggable="true" ondragstart="drag(event)"/>
            <img src="../images/拼图/7.jpg" id="move7" draggable="true" ondragstart="drag(event)"/>
            <img src="../images/拼图/8.jpg" id="move8" draggable="true" ondragstart="drag(event)"/>
            <img src="../images/拼图/9.jpg" id="move9" draggable="true" ondragstart="drag(event)"/>
        </div>
    </div>
</body>
</html>